<template>
    <!-- pages/redenvelope/details/index.wxml -->
    <view>
        <view class="redenvelope">
            <view class="bg-f">
                <view class="envelopebox">
                    <view class="mr-10">
                        <image v-if="RedbagData.type == 1" class="img" :src="imgUrl + 'ordinary.png'"></image>
                        <image v-if="RedbagData.type == 0" class="img" :src="imgUrl + 'luck.png'"></image>
                    </view>
                    <view>
                        <view class="re-title ml-10">{{ RedbagData.title }}</view>
                        <view class="centers ml-10">
                            <view class="centers mr-50">
                                <text class="e-text1">发包金额:</text>
                                <text :class="'e-text2 ' + (RedbagData.status == 2 ? 'e-color' : '')">
                                    ￥
                                    <text :class="'e-text3 ' + (RedbagData.status == 2 ? 'e-color' : '')">{{ RedbagData.totalamount }}</text>
                                </text>
                            </view>
                            <view class="cneters">
                                <text class="e-text1">发包数量:</text>
                                <text :class="'e-text3 ' + (RedbagData.status == 2 ? 'e-color' : '')">{{ RedbagData.grantquantity }}</text>
                            </view>
                        </view>
                        <view :class="'centers rd-box mt-10 ' + (RedbagData.status == 2 ? 'bg-color' : '')">
                            <view class="cneters">
                                <text class="e-text1">已领取</text>
                                <text :class="'e-text2 ' + (RedbagData.status == 2 ? 'e-color' : '')">{{ RedbagData.receivequantity }}</text>
                                <text class="e-text1">/{{ RedbagData.grantquantity }}</text>
                            </view>
                            <view class="centers">
                                <text class="e-text1">推荐新人:</text>
                                <text class="e-text1">{{ RedbagData.recommendNewPerson ? RedbagData.recommendNewPerson : 0 }}</text>
                            </view>
                        </view>
                    </view>
                    <view :class="RedbagData.status == 2 ? 'statustext1' : 'statustext'">
                        <text v-if="RedbagData.status == 0">待支付</text>
                        <text v-if="RedbagData.status == 1">派发中</text>
                        <text v-if="RedbagData.status == 2">已结束</text>
                    </view>
                    <!-- <view wx:if="{{RedbagData.type == 1}}" class="typebox">
          <image class="type-img" src="{{imgUrl + 'lucktit.png'}}"></image>
          <text class="type-text">拼手气</text>
        </view>
        <view wx:if="{{RedbagData.type == 0}}" class="typebox">
          <image class="type-img" src="{{imgUrl + 'ordinarytit.png'}}"></image>
          <text class="type-text">普通包</text>
        </view> -->
                </view>
                <view class="centers re-text" v-if="RedbagData.status > 0 && RedbagData.status == 2">
                    <image class="mr-10 icon-24" :src="imgUrl + 'hint.png'"></image>
                    <view class="centers">{{ RedbagData.remainingquantity }}个红包未被领取，剩余{{ RedbagData.refundamount }}已退回余额</view>
                </view>
            </view>
        </view>
        <view class="showbox">
            <view class="flexbox-sb mb-60">
                <view class="showtitle">已领取</view>
                <view class="quantitytext">{{ RedbagData.receivequantity }}/{{ RedbagData.grantquantity }}</view>
            </view>
            <view class="flexbox-sb mt-20" v-for="(item, index) in RedbagData.redbagDrawRecords" :key="index">
                <view class="centers">
                    <image class="headimg mr-20" :src="item.headportrait"></image>
                    <view>
                        <view class="s-text1">{{ item.username }}</view>
                        <view class="s-text2">{{ item.drawtime }}</view>
                    </view>
                </view>

                <view class="s-text3 centers">￥{{ item.money }}</view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/redenvelope/details/index.js
const app = getApp(); // 引入app

import _request from '../../../utils/request.js';
export default {
    data() {
        return {
            imgUrl: app.globalData.imgUrl,
            //全局img路径
            RedbagData: null,
            list: [],
            pageNo: 1,
            pageSize: 10,
            nolist: false,
            id: ''
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {
        let obj = JSON.parse(options.data); // _request.get('/redbagShare/redbagGetList', {
        //   redbagId: obj.id
        // }).then(res=>{
        //   this.setData({
        //     RedbagData: res.data.data
        //   })
        // })

        this.setData({
            id: obj.id
        }); // 红包领取列表

        this.getlist();
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        if (this.nolist) {
            return;
        }

        this.setData({
            nolist: true
        });
        this.setData({
            pageNo: this.pageNo + 1
        });
        this.getlist();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        getlist() {
            _request
                .postObj('/redbagShare/getDetail', {
                    pageNo: this.pageNo,
                    pageSize: this.pageSize,
                    redbagId: this.id,
                    userId: uni.getStorageSync('userid')
                })
                .then((res) => {
                    if (this.pageNo == 1) {
                        this.setData({
                            RedbagData: res.data.data,
                            nolist: false
                        });
                    } else {
                        this.setData({
                            ['RedbagData.redbagDrawRecords']: [...this.RedbagData.redbagDrawRecords, ...res.data.data.redbagDrawRecords],
                            nolist: false
                        });
                    }

                    if (res.data.data.redbagDrawRecords.length > 0) {
                        this.setData({
                            nolist: false
                        });
                    } else {
                        this.setData({
                            nolist: true
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
/* pages/redenvelope/details/index.wxss */
/* 红包 */
.redenvelope {
    padding: 20rpx;
}

.envelopebox {
    width: 710rpx;
    background: #ffffff;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    margin-top: 20rpx;
    padding: 38rpx 20rpx 0 20rpx;
    box-sizing: border-box;
}

.rd-box {
    width: 374rpx;
    height: 52rpx;
    background: #fffbf7;
    border: 1px solid #ff8722;
    border-radius: 26px;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding: 0 20rpx 0 12rpx;
    box-sizing: border-box;
    margin-bottom: 38rpx;
}

.e-text1 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 52rpx;
}

.e-text2 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff1b0b;
    line-height: 52rpx;
}

.e-text3 {
    font-size: 28rpx;
    color: #ff1b0b;
    line-height: 52rpx;
}

.e-color {
    color: #999999;
}

.bg-color {
    border: 1px solid #999999;
}

.re-text {
    height: 62rpx;
    line-height: 62rpx;
    border-top: 1px solid #e4e4e4;
    margin: 0 20rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 62rpx;
}

.bagbtn {
    width: 155rpx;
    height: 52rpx;
    background: #ff8722;
    box-shadow: 0px 4px 9px 0px rgba(255, 135, 34, 0.42);
    border-radius: 26px;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 52rpx;
    text-align: center;
}

.bg-f {
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
}

.img {
    width: 95rpx;
    height: 95rpx;
    border-radius: 50%;
}

.statustext {
    position: absolute;
    right: 20rpx;
    top: 30rpx;
    width: 86rpx;
    height: 35rpx;
    border: 1px solid #ff8722;
    border-radius: 5px;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ff8722;
    line-height: 35rpx;
    text-align: center;
}

.statustext1 {
    position: absolute;
    right: 20rpx;
    top: 30rpx;
    width: 86rpx;
    height: 35rpx;
    border: 1px solid #999999;
    border-radius: 5px;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
    line-height: 35rpx;
    text-align: center;
}

.typebox {
    width: 81rpx;
    height: 28rpx;
    display: flex;
    justify-content: center;
    position: absolute;
    align-content: center;
    top: 0;
    left: 30rpx;
}

.type-img {
    width: 81rpx;
    height: 28rpx;
}

.type-text {
    font-size: 20rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    width: 81rpx;
    padding-left: 14rpx;
    line-height: 28rpx;
    position: absolute;
}

.re-title {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 1.2;
    width: 450rpx;
    line-break: anywhere;
}

/* 领取人 */
.showbox {
    width: 710rpx;
    background: #ffffff;
    box-shadow: 0px 1px 29px 0px rgba(0, 0, 0, 0.04);
    border-radius: 10px;
    margin: 20rpx;
    padding: 20rpx;
    box-sizing: border-box;
}

.showtitle {
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 24rpx;
}

.quantitytext {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 24rpx;
}

.headimg {
    width: 95rpx;
    height: 95rpx;
    border-radius: 50%;
}

.s-text1 {
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
}

.s-text2 {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

.s-text3 {
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ff8722;
}
</style>
